<template>
  <div>
    <el-divider>基本信息</el-divider>
    <el-descriptions direction="vertical" :column="10" border>
      <el-descriptions-item label="盘点仓库">{{ taskObj.storehouseName || '-' }}</el-descriptions-item>
      <el-descriptions-item label="盘点人">{{ taskObj.checkerName || '-' }}</el-descriptions-item>
      <el-descriptions-item label="盘点方式">{{ ['全盘盘点', '比例盘点'][taskObj.type] || '-' }}</el-descriptions-item>
      <el-descriptions-item label="盘点比例">
        {{ taskObj.type === '0' ? '-' : taskObj.proportion * 100 + '%' || '0%' }}</el-descriptions-item>
      <el-descriptions-item label="盘点对象生成方式">{{ ['随机生成', '手动生成'][taskObj.generationType] || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="备注">{{ taskObj.remark || '-' }}</el-descriptions-item>
    </el-descriptions>
    <el-divider>盘点信息</el-divider>
    <el-form :model="{}" size="medium" :inline="true" label-width="60px">
      <el-form-item label="操作栏" prop="">
        <el-button v-if="!condition" type="primary" icon="el-icon-circle-plus-outline" size="medium"
          @click="CommitCondition">开始盘点</el-button>
        <el-button v-show="condition" type="primary" :disabled="!(multipleSelection.length === 1) || (showStart)" plain
          icon="el-icon-circle-plus-outline" size="medium" @click="handlesubmit">完成盘点</el-button>
      </el-form-item>
      <el-form-item label="" prop="" v-if="condition">
        <el-button type="primary" plain icon="el-icon-download" size="medium" @click="handleload">下载盘点对象</el-button>
      </el-form-item>
      <el-form-item label="" prop="" v-if="condition">
        <FileimportUpload @getList="getList" :limit="1" :isShowTip="false"></FileimportUpload>
        <!-- <FileUpload>
          </FileUpload>
          <el-button type="primary" plain icon="el-icon-upload2" size="medium" @click="handleupload">导入盘点对象
          </el-button> -->
      </el-form-item>
      <el-form-item label="" prop="" v-if="condition">
        <el-button :disabled="showStart" type="success" :loading="loadingFinish" plain icon="el-icon-circle-check"
          size="medium" @click="handleFinish">结束盘点</el-button>
      </el-form-item>
      <el-form-item label="" prop="" v-if="condition">
        <el-button :disabled="!showStart" :loading="loadingStart" type="warning" plain icon="el-icon-circle-check"
          size="medium" @click="handleStart">开始平账</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格部分 -->
    <el-table v-loading="loading" @filter-change="filterChange" @selection-change="handleSelectionChange"
      ref="multipleTable" :data="tableData">
      <el-table-column v-if="condition" type="selection" width="55">
      </el-table-column>
      <el-table-column label="序号" align="center" width="50">
        <template slot-scope="scope">
          {{ scope.$index + 1 || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="物料编号" align="center" min-width="150">
        <template slot-scope="scope">
          {{ scope.row.materialNum || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="物料名称" align="center" min-width="150">
        <template slot-scope="scope">
          {{ scope.row.materialName || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="规格型号" align="center" min-width="130">
        <template slot-scope="scope">
          {{ scope.row.model || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="类别" align="center" min-width="120">
        <template slot-scope="scope">
          {{ scope.row.typeName || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="类型" align="center" min-width="120">
        <template slot-scope="{row}">
          <dict-tags :options="SparePartsAndConsumables" :value="row.kind" />
        </template>
      </el-table-column>
      <el-table-column label="所在仓库" align="center" min-width="130" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.storehouseName || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="单位" align="center" min-width="120">
        <template slot-scope="scope">
          {{ scope.row.unitName || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="账上库存数量" align="center" min-width="120">
        <template slot-scope="scope">
          {{ scope.row.amount || '0' }}
        </template>
      </el-table-column>
      <el-table-column label="实际库存数量" align="center" min-width="120">
        <template slot-scope="scope">
          {{ scope.row.actualAmount || '0' }}
        </template>
      </el-table-column>
      <el-table-column label="盘点状态" :filter-multiple="false" :filters="filtersStatus" align="center" min-width="120">
        <template slot-scope="scope">
          <div :style="'color:' + ['#F56C6C', '#67C23A', '#E6A23C', '#67C23A'][scope.row.status]">
            <!-- <i :class="['el-icon-success', 'el-icon-remove'][scope.row.status]" /> -->
            <span>
              {{ ['未盘点', '已盘点', '盘亏', '盘盈'][scope.row.status] || '-' }}
            </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="盘点时间" align="center" min-width="160">
        <template slot-scope="scope">
          {{ scope.row.checkTime || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="说明" align="center" min-width="120" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.remark || '-' }}
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
    <!-- 开始盘点 -->
    <template v-if="open">
      <CreateInventory :rowArr="multipleSelection"></CreateInventory>
    </template>
  </div>
</template>

<script>
import { getSelectstockChildren, getSelectstockConsumableList, downloadexport, putStart, putend, putaccount } from "@/api/deviceConsumable/inventoryCheck/index.js";
export default {
  props: ['rowObj'],
  components: {
    CreateInventory: () => import('./createInventory.vue'),
    FileimportUpload: () => import('@/components/FileUpload/FileimportUpload.vue')
  },
  data () {
    return {
      taskObj: {},
      tableData: [],
      open: false,
      loading: false,
      loadingFinish: false,
      loadingStart: false,
      activeName: undefined,
      condition: false,
      showStart: false,
      multipleSelection: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderByColumn: 'consumableBaseId',
        isAsc: 'desc'//倒叙
      },
      total: 0
    }
  },
  computed: {
    filtersStatus () {
      return [
        { text: '未盘点', value: '0' },
        { text: '已盘点', value: '1' },
        { text: '盘亏', value: '2' },
        { text: '盘盈', value: '3' },
      ]
    }
  },
  created () {
    this.getList()
    this.getbyDeptIds()
  },
  watch: {
  },
  methods: {
    async getbyDeptIds () {
      let params = await getSelectstockChildren(this.rowObj.checkStockId);
      this.taskObj = params.data
      if (this.rowObj.status === '2') {//执行中表示已经开始盘点
        this.condition = true
      }
      if (this.rowObj.status === '3') {//已完成表示已经盘点完成
        this.condition = true
        this.showStart = true//可以开始平账
      }
    },
    async getList () {
      this.loading = true
      let promise = {
        ...this.queryParams,
        checkStockId: this.rowObj.checkStockId
      }
      promise = this.activeName ? { ...promise, status: this.activeName } : { ...promise }
      let data = await getSelectstockConsumableList(promise);
      this.tableData = data.data
      this.total = data.total
      this.loading = false
      return false
    },
    handlesubmit () {
      this.open = true
    },
    /**开始盘点 */
    CommitCondition () {
      let params = {
        checkStockId: this.taskObj.checkStockId,
      }
      putStart(params).then(res => {
        if (res.code === 200) {
          this.condition = true
          this.$message.success('操作成功')
        }
      }).catch(err => {
        console.log(err);
      })
    },
    /**结束盘点 */
    handleFinish () {
      this.loadingFinish = true
      let params = {
        checkStockId: this.taskObj.checkStockId,
      }
      putend(params).then(res => {
        if (res.code === 200) {
          this.showStart = true//可以开始平账
          this.$message.success('操作成功')
        }
        this.loadingFinish = false
      }).catch(err => {
        console.log(err);
        this.loadingFinish = false
      })
    },
    /**开始平账 */
    handleStart () {
      this.$confirm(`平账后:<br/>盘盈备件耗材将自动修改库存，并生成入库记录;<br/>盘亏备件耗材将自动修改库存，并生成出库记录;`, '是否确认平账', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        dangerouslyUseHTMLString: true,
        type: 'warning'
      }).then(() => {
        this.loadingStart = true;
        let params = {
          checkStockId: this.taskObj.checkStockId,
        }
        putaccount(params).then(res => {
          if (res.code === 200) {
            this.$message.success('操作成功')
            this.$emit('quit')
          }
          this.loadingStart = false;
        }).catch(() => { this.loadingStart = false; });
      }).catch(() => { this.loadingStart = false; })
    },
    /**下载 */
    handleload () {
      let params = {
        checkStockId: this.taskObj.checkStockId,
      }
      params = this.activeName ? { ...params, status: this.activeName } : { ...params }
      let name = '盘点物料列表.xlsx'
      downloadexport(params, name).then(res => {
        console.log(res);
      }).catch(err => {
        console.log(err);
      })
    },
    /**
     * 表格多选选中
     * @param {每一行} row 
     */
    handleSelectionChange (selection, row) {
      this.multipleSelection = []
      // this.multipleSelection = row
      if (selection.length === 1) {
        this.multipleSelection.push(selection[0])
      }
      if (selection.length > 1) {
        this.multipleSelection.push(selection[1])  //purchaseEquipmentId
        // shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
        // 该方法不创建新数组，而是直接修改原有的 arrayObject。
        let del_row = selection.shift()
        // 其余的都不选中
        this.$refs.multipleTable.toggleRowSelection(del_row, false)
      }
    },
    filterChange (filterCondition) {
      for (const key in filterCondition) {
        const element = filterCondition[key][0];
        this.activeName = element
        this.getList()
        return
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table__header-wrapper .el-checkbox {
  display: none;
}
</style>